<template>
  <basic-container radius="0">
    <!-- START goBack -->
    <div class="navigation_bars haruyuki-mt-20">
      <div
        :class="['nav_bar_item']"
        v-for="(item, index) in typeList"
        :key="index"
        @click="clickTerminal(item)"
      >
        <div :class="['nav_bar_item_text', typeIndex == item.prop ? 'active' : '']">
          <span class="item_text">{{ item.name }} </span>
          <span class="item_total" v-if="item.total">{{ item.total }}</span>
        </div>
      </div>
    </div>
    <template v-if="typeIndex == '0'">
      <stock-decca :rptNo="rptNo"></stock-decca>
    </template>
    <template v-if="typeIndex == '1'">
      <stock-sound :rptNo="rptNo"></stock-sound>
    </template>
    <template v-if="typeIndex == '2'">
      <stock-pos :rptNo="rptNo"></stock-pos>
    </template>
    <template v-if="typeIndex == '4'">
      <stock-znj :rptNo="rptNo"></stock-znj>
    </template>
    <template v-if="typeIndex == '6'">
      <stock-scan :rptNo="rptNo"></stock-scan>
    </template>
  </basic-container>
</template>

<script>
// import { queryAisleList, queryBasicAisleListPlus } from "@/api/rb-oem/posinfo/pos_info_details";
import { groupCount } from "@/api/rb-oem/terminal/terminal";

import stockDecca from "./components/stock_decca";
import stockSound from "./components/stock_sound";
import stockPos from "./components/stock_pos";
import stockScan from "./components/stock_scan";
import stockZnj from './components/stock_znj.vue';

export default {
  components: {
    stockDecca,
    stockSound,
    stockPos,
    stockScan,
    stockZnj
  },
  data() {
    return {
      id: "",
      rpiNo: "", //商户编号
      rptNo: "", //设备类型编号
      activeIndex: 0,
      loading: true,
      typeIndex: "0",
      typeList: [
        {
          id: 1,
          name: "台卡",
          prop: "0",
          rptNo: "15",
          total: 0
        },
        {
          id: 2,
          name: "音响",
          prop: "1",
          rptNo: "19",
          total: 0
        },
        {
          id: 3,
          name: "传统POS",
          prop: "2",
          rptNo: "20",
          total: 0
        },
        // {
        //   id: 4,
        //   name: "打印机",
        //   prop: "3",
        //   total: 0
        // },
        {
          id: 5,
          name: "智能POS",
          prop: "4",
          rptNo: "24",
          total: 0
        },
        // {
        //   id: 6,
        //   name: "终端",
        //   prop: "5",
        //   total: 0
        // },
        {
          id: 7,
          name: "扫码设备",
          prop: "6",
          rptNo: "23",
          total: 0
        }
      ]
    };
  },
  computed: {
    base64() {
      return (val) => {
        if (val) {
          if (val.indexOf("data:image/png;base64,") == -1) {
            return "data:image/png;base64," + val;
          } else {
            return val;
          }
        } else {
          return "";
        }
      };
    },
  },
  created() {
    // console.log(this.$route, 'this.$route');
    if (this.$route.params.id) {
      this.typeIndex = this.$route.params.id;
      // console.log(this.typeIndex, 'typeIndex');
    }
  },
  mounted() {},
  methods: {
    clickTerminal(row) {
      const _this = this;
      _this.typeIndex = row.prop;
      _this.rptNo = row.rptNo;
    },
    terminalTotal() {
      groupCount({ rpiNo: this.rpiNo, eqType: 1 }).then((res) => {
        this.typeList[0].total = res.data.data.tkNum;
        this.typeList[2].total = res.data.data.dsfNum;
      });
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .basic-container {
  padding: 0;
}
/deep/.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.navigation_bars {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.nav_bar_item {
  align-items: center;
  // width: 268px;
  width: 200px;
  padding: 16px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  .nav_bar_item_text {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #ffffff;
    background: #8b94a8;
    border-radius: 5px;
    &.active {
      //   background: rgba(2, 86, 255, .1);
      // background: #409EFF;
      background: #6087fc;
      color: #ffffff;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      box-shadow: 0 2px 12px rgba(224,234,252,0.8);
    }
  }
  .item_text {
    font-weight: bolder;
  }
  .item_total {
    background-color: #f56c6c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    // border: 1px solid #fff;
  }
}
</style>